<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
*{ 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0 
}
body {
  color: #eee;
  text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 16px;
  overflow: hidden;
}
#viewport {
  -webkit-perspective: 1000px; 
  -moz-perspective: 1000px; 
  -ms-perspective: 1000px; 
  -o-perspective: 1000px; 
  perspective: 1000px; 
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
  background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
  background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
  background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
  background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.28, rgb(69,132,180)),
    color-stop(0.64, rgb(31,71,120))
  );
}

#world {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -256px;
  height: 512px;
  width: 512px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#world div {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; 
}

.cloudBase {
  position: absolute;
  left: 256px;
  top: 256px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
}

.cloudLayer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 256px;
  height: 256px;
  margin-left: -128px;
  margin-top: -128px;
  -webkit-transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -ms-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
  background-image: url('');
}


</style>
 </head>
 <body>
<div id="viewport" >
  <div id="world" ></div>
</div>
<script>
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelRequestAnimationFrame = window[vendors[x]+
        'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
  }())

  var layers = [],
    objects = [],
    
    world = document.getElementById( 'world' ),
    viewport = document.getElementById( 'viewport' ),
    
    d = 0,
    p = 400,
    worldXAngle = 0,
    worldYAngle = 0;
  
  viewport.style.webkitPerspective = p;
  viewport.style.MozPerspective = p;
  viewport.style.oPerspective = p;
  
  generate();
  
  function createCloud() {
  
    var div = document.createElement( 'div'  );
    div.className = 'cloudBase';
    var x = 256 - ( Math.random() * 512 );
    var y = 256 - ( Math.random() * 512 );
    var z = 256 - ( Math.random() * 512 );
    var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
    div.style.webkitTransform = 
    div.style.MozTransform = 
    div.style.msTransform = 
    div.style.oTransform = 
    div.style.transform = t;
    world.appendChild( div );
    
    for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
      var cloud = document.createElement( 'div' );
      cloud.style.opacity = 0;
      cloud.style.opacity = .8;
      cloud.className = 'cloudLayer';
      
      var x = 256 - ( Math.random() * 512 );
      var y = 256 - ( Math.random() * 512 );
      var z = 100 - ( Math.random() * 200 );
      var a = Math.random() * 360;
      var s = .25 + Math.random();
      x *= .2; y *= .2;
      cloud.data = { 
        x: x,
        y: y,
        z: z,
        a: a,
        s: s,
        speed: .1 * Math.random()
      };
      var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )';
      cloud.style.webkitTransform = 
      cloud.style.MozTransform = 
      cloud.style.msTransform =
      cloud.style.oTransform = 
      cloud.style.transform = t;
    
      div.appendChild( cloud );
      layers.push( cloud );
    }
    
    return div;
  }
  
  viewport.addEventListener( 'mousewheel', onContainerMouseWheel );
  viewport.addEventListener( 'DOMMouseScroll', onContainerMouseWheel ); 

  viewport.addEventListener( 'mousemove', function( e ) {
    worldYAngle = -( .5 - ( e.clientX / viewport.clientWidth ) ) * 180;
    worldXAngle = ( .5 - ( e.clientY / viewport.clientWidth ) ) * 180;
    updateView();
  } );
  
  function generate() {
    objects = [];
    if ( world.hasChildNodes() ) {
      while ( world.childNodes.length >= 1 ) {
        world.removeChild( world.firstChild );       
      } 
    }
    for( var j = 0; j < 5; j++ ) {
      objects.push( createCloud() );
    }
  }
  
  function updateView() {
    var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
    world.style.webkitTransform =
    world.style.MozTransform =
    world.style.msTranform =
    world.style.oTransform =
    world.style.transform = t;
  }
  
  function onContainerMouseWheel( event ) {
      
    event = event ? event : window.event;
    d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 );
    updateView();
    
  }
  
  function update (){
    
    for( var j = 0; j < layers.length; j++ ) {
      var layer = layers[ j ];
      layer.data.a += layer.data.speed;
      var t = 'translateX( ' + layer.data.x + 'px ) translateY( ' + layer.data.y + 'px ) translateZ( ' + layer.data.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( ' + ( - worldXAngle ) + 'deg ) rotateZ( ' + layer.data.a + 'deg ) scale( ' + layer.data.s + ')';
      layer.style.webkitTransform =
      layer.style.MozTransform =
      layer.style.msTranform =
      layer.style.oTransform =
      layer.style.transform = t;
    }
    
    requestAnimationFrame( update );
    
  }
  
  update();

  </script>
 </body>
</html>
